<template>
    <el-container>
        <el-aside style="width: 18%;height: 100%;background-color: #5daf34">
            <p>工具箱</p>
            <el-tree style="padding-bottom:10px;overflow-y: auto;height: 200px"
                     :data="treeData"
                     :props="defaultProps"
                     @node-click="handleNodeClick">
            </el-tree>
        </el-aside>
        <el-main style="padding: 0;background-color: #1da1f2">
            <i class="el-icon-circle-check" title="保存工作流" style="float: right"></i>
            <i class="el-icon-picture-outline-round" title="运行工作流" style="float: right;padding-right: 15px"> </i>
            <div class="flowchart-demo" id="flowchart-demo"
                 style="background-color: red;width: 100%;height: 100%"></div>
        </el-main>
        <!--<el-footer style="background-color: #7b98bc"></el-footer>-->
    </el-container>
</template>

<script>
    // import jsPlumb from '../../../node_modules/jsplumb/dist/js/jsplumb.min'
    export default {
        data() {
            return {
                j_instance: "",
                treeData: [{
                    label: '一级 1',
                    children: [{
                        label: '二级 1-1',
                        children: [{
                            label: '三级 1-1-1'
                        }]
                    }]
                }, {
                    label: '一级 2',
                    children: [{
                        label: '二级 2-1',
                        children: [{
                            label: '三级 2-1-1'
                        }]
                    }, {
                        label: '二级 2-2',
                        children: [{
                            label: '三级 2-2-1'
                        }]
                    }]
                }, {
                    label: '一级 3',
                    children: [{
                        label: '二级 3-1',
                        children: [{
                            label: '三级 3-1-1'
                        }]
                    }, {
                        label: '二级 3-2',
                        children: [{
                            label: '三级 3-2-1'
                        }]
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }

        },
        methods: {
            letsDrag(data) {
                // let type = data.name.length > 30 ? "Personal" : "Public";
                // document.onmouseup = function (e) {
                //     $(".el-tabs__content").css("overflow-y", "auto");
                // };
                // document.onmousedown = function (e) {
                //     $(".el-tabs__content").css("overflow-y", "hidden");
                // };
                $("div[class='el-tree-node__children'] span[class='el-tree-node__label']").addClass("drahitem");
                $(".drahitem").draggable({
                    scope: "inputnodes",
                    helper: function () {
                        // let clone = $('<div tag="'+type+"_"+data.value.toString()+'" class="ui-clone">' + $(this).html() + '</div>');
                        let clone = $('<div tag="' + "Personal" + '" class="ui-clone">' + $(this).html() + '</div>');
                        clone.appendTo('body');
                        return clone;
                    },
                    containment: 'body',
                    appendTo: 'body'
                });
            },
            handleNodeClick(data) {
                // if (data.leaves.length === 0) {
                //     // this.appendPublicModel(data);
                // }
                this.letsDrag(data);
            },
        },
        created() {
// jsPlumb.ready()
        },
        mounted() {
            let that = this;
            this.$jsPlumb.ready(function () {
                let j_instance = that.$jsPlumb.getInstance({
                    DragOptions: {cursor: "pointer", zIndex: 2000},
                    PaintStyle: {stroke: "#346789", strokeWidth: 1},
                    Endpoinet: ["Dot", {radius: 5}],
                    Connector: ["Bezier", {curviness: 70}],
                    ConnectionOverlays: [
                        ["Arrow",
                            {
                                location: 1,
                                visible: true,
                                width: 11,
                                height: 11,
                                id: "Arrow"
                            }
                        ],
                        ["Label",
                            {
                                location: 0.1,
                                id: "Label",
                                cssClass: "arrow-label",
                                events: {
                                    tap() {
                                        console.log("Label");
                                    }
                                }
                            }]
                    ],
                    Container: "flowchart-demo"
                });

                // 作为节点可拖动。
                j_instance.draggable($(".window"), {containment: "flowchart-demo"});
                $("#flowchart-demo").droppable({
                    scope: "inputnodes",
                    drop: function (ev, ui) {
                        let className = '';
                        // if (that.selectedTab == 0)
                        //     className = "windowpane-first";
                        // else
                        //     className = "windowpane-second";

                        let id = "item" + new Date().getTime();
                        let showFormId = "edit" + id;
                        let showTableId = "table" + id;
                        let dataFilter = "filter" + id;
                        let html = '';
                        // let dataOnMap="map"+id;
                        // let dataType = ui.helper.attr("tag");
                        let dataOnMap = ui.helper.attr("tag") + "_" + id;
                        // if (className == 'windowpane-first') {
                        html = `<div id="${id}" class="${className}"><span>${that.nodeIndex + ":" + ui.helper.text()}<i class="fa fa-filter" id="${dataFilter}"></i><i value="dataType" class="fa fa-globe" id="${dataOnMap}"></i><i class=" fa fa-table" id="${showTableId}"></i></span></div>`;
                        // } else if (className == 'windowpane-second') {
                        html = `<div id="${id}" class="${className}"><span>${that.nodeIndex + ":" + ui.helper.text()}<i class=" fa fa-life-ring" id="${showFormId}"></i></span></div>`;
                        // }

                        $(this).append(html);
                        // that.nodeIndex++;
                        let basetop = $("#flowchart-demo").position().top;
                        let baseleft = $("#flowchart-demo").position().left;
                        $("#" + id).css({
                            top: ui.position.top + basetop + "px",
                            left: ui.position.top - baseleft + "px"
                        });
                        let currentItem = document.getElementById(id);

                        let tempModelId = ui.helper.text();
                        //数据过滤
                        // if (document.getElementById(dataFilter)) {
                        //     tempModelId = "DataQuery";
                        //     document.getElementById(dataFilter).onclick = function () {
                        //         let dataType = dataOnMap.substring(0, dataOnMap.lastIndexOf("_"));
                        //         let dataid = '';
                        //         if (dataType == 'Public') {
                        //             that.artifactId = $(currentItem)[0].innerText.split(":")[1];
                        //             for (let data of that.dataOptions[0].leaves) {
                        //                 // if (data.name == that.artifactId) {
                        //                 //     dataid = data.value;
                        //                 //     break
                        //                 // }
                        //                 if (data.leaves.length !== 0) {
                        //                     for (let da of data.leaves) {
                        //                         if (da.leaves.length !== 0) {
                        //                             for (let d of da.leaves) {
                        //                                 if (d.name == that.artifactId) {
                        //                                     dataid = d.value;
                        //                                     break
                        //                                 }
                        //                             }
                        //                         }
                        //                     }
                        //                 }
                        //             }
                        //             // let currentItemId = document.getElementById(dataFilter).parentElement.parentElement.id;
                        //             // that.$axios.get('/wf/ifspatial/' + dataid).then(function (response) {
                        //             //     if (response.code == 200) {
                        //             //         // that.isSpatialData=response.body;
                        //             //         if (response.body == 1) {
                        //             //             that.isSpatialData = true;
                        //             //             that.$Bus.$emit('isSpatialData', that.isSpatialData, that.artifactId);
                        //             //         } else {
                        //             //             that.isSpatialData = false;
                        //             //             that.$Bus.$emit('isSpatialData', that.isSpatialData, that.artifactId);
                        //             //         }
                        //             //         that.$Bus.$emit('setTaskId', currentItemId);
                        //             //         that.dataFilterDialogVisible.v = true;
                        //             //         that.$Bus.$emit('dataFilterDialogVisible', that.dataFilterDialogVisible);
                        //             //         // console.log(that.isSpatialData);
                        //             //     }
                        //             // });
                        //         }
                        //         // that.$Bus.$emit('dataFilterDialogVisible', that.dataFilterDialogVisible,that.isSpatialData);
                        //     }
                        // }
                        //数据上图
                        // if (document.getElementById(dataOnMap)) {
                        //     document.getElementById(dataOnMap).onclick = function () {
                        //         // let index=dataOnMap.lastIndexOf("_");
                        //         let dataType = dataOnMap.substring(0, dataOnMap.lastIndexOf("_"));
                        //         let cardData = {};
                        //         if (dataType == 'Public') {
                        //             that.artifactId = $(currentItem)[0].innerText.split(":")[1];
                        //             for (let data of that.dataOptions[0].leaves) {
                        //                 if (data.leaves.length !== 0) {
                        //                     for (let da of data.leaves) {
                        //                         if (da.leaves.length !== 0) {
                        //                             for (let d of da.leaves) {
                        //                                 if (d.name == that.artifactId) {
                        //                                     cardData.pk_meta_id = d.value;
                        //                                     cardData.dataName = d.name;
                        //                                     break
                        //                                 }
                        //                             }
                        //                         }
                        //                     }
                        //                 }
                        //                 // if (data.name == that.artifactId) {
                        //                 //     cardData.pk_meta_id = data.value;
                        //                 //     cardData.dataName = data.name;
                        //                 //     break
                        //                 // }
                        //             }
                        //         } else if (dataType == 'Personal') {
                        //             that.artifactId = $(currentItem)[0].innerText.split(":")[1];
                        //             for (let data of that.dataOptions[1].children) {
                        //                 if (data.label == that.artifactId) {
                        //                     cardData.id = data.value;
                        //                     cardData.dataName = data.label;
                        //                     break
                        //                 }
                        //             }
                        //         }
                        //         that.page = 'gee';
                        //         that.spatialFieldVisible.v = true;
                        //         console.log(cardData);
                        //         that.$Bus.$emit('fieldSelect', that.spatialFieldVisible, cardData, that.page);
                        //     }
                        // }
                        //双击删除自己，以及与自身相关的连线。
                        currentItem.ondblclick = function () {
                            j_instance.remove(id);
                        };
                        //弹出modelForm
                        // if (document.getElementById(showFormId)) {
                        //     document.getElementById(showFormId).onclick = function () {
                        //         that.dialogVisible.v = true;
                        //         that.artifactId = $(currentItem)[0].innerText.split(":")[1];
                        //         let currentItemId = document.getElementById(showFormId).parentElement.parentElement.id;
                        //         that.page = 'gee';
                        //         that.findModelIdThenGetParam(that.artifactId,currentItemId);
                        //         // that.$Bus.$emit('geePop', that.dialogVisible, that.artifactId, currentItemId, that.j_instance.getAllConnections(), that.modelsParam);
                        //     };
                        // }
                        //弹出数据预览tab页
                        // if (document.getElementById(showTableId)) {
                        //     document.getElementById(showTableId).onclick = function () {
                        //         that.previewDialogVisible.v = true;
                        //         that.artifactId = $(currentItem)[0].innerText.split(":")[1];
                        //         that.findDataIdThenPreview(that.artifactId);
                        //         console.log(that.artifactId);
                        //         that.page = 'gee';
                        //     };
                        // }
                        //
                        j_instance.draggable(id, {
                            grid: [1, 1],
                            containment: "flowchart-demo"
                        });
                        // j_instance.draggable($("#" + id), { containment: "flowchart-demo" });
                        //maxConnections为-1则不限制其连线的数量，应改为模型对应参数的数量。
                        j_instance.addEndpoint(id, {
                            anchor: "Right",
                            maxConnections: that.maxIn,
                            endpointStyle: {
                                fill: "rgb(33, 194, 33)"
                            },
                            isSource: true
                        });
                        j_instance.addEndpoint(id, {
                            anchor: "Left",
                            maxConnections: that.maxIn,
                            endpointStyle: {
                                fill: "#346789"
                            },
                            isTarget: true
                        });
                    }
                });
                // that.$jsPlumb.fire("jsPlumbDemoLoaded", j_instance);
                that.j_instance = j_instance;
            });
        }
    }
</script>

<style>

</style>